<script setup>
import { ref, watch, shallowRef } from 'vue'
import FileList from '@/components/fileList/index.vue'
import { useDict } from '@/hooks/useDict'
const { getDictValue } = useDict()
import '@wangeditor/editor/dist/css/style.css'
import { Editor } from '@wangeditor/editor-for-vue'

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  () => {
    form.value = props.detail
  },
)
const form = ref({
  attachmentFiles: [],
  attachmentVideos: [],
  coverImages: [],
})

// 富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
//富文本
const editorConfig = {
  placeholder: '',
  MENU_CONF: {},
  readOnly: true,
}
const handleCreated = (editor) => {
  editorRef.value = editor
}
</script>

<template>
  <div class="custom-detail">
    <el-row :gutter="20">
      <el-col :span="8">
        <span class="label">任务类型:</span>
        <span class="value">{{
          getDictValue('special_task_type', form.taskType)
        }}</span>
      </el-col>
      <!-- <el-col :span="8" v-if="form.taskType === '3'">
        <span class="label">公告标题:</span>
        <span class="value">{{ form.noticeTitle }}</span>
      </el-col> -->
      <el-col :span="8">
        <span class="label">发布范围:</span>
        <span class="value">{{
          getDictValue('special_task_publish_scope', form.publishScope)
        }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">接收单位:</span>
        <span class="value">{{ form.receiveUnitNames }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">接收人:</span>
        <span class="value">{{ form.userNames }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">有效期:</span>
        <span class="value">{{ form.startDate }} - {{ form.endDate }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">观看时限:</span>
        <span class="value"
          >{{ form.learnDuration
          }}{{
            getDictValue('video_watch_duration_unit', form.durationUnit)
          }}</span
        >
      </el-col>
      <el-col :span="8">
        <span class="label">通知公告编号:</span>
        <span class="value">{{ form.code }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">是否必须回传照片:</span>
        <span class="value">{{ getDictValue('yn', form.needFeedBack) }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">回传照片说明:</span>
        <span class="value">{{ form.feedBackDesc }}</span>
      </el-col>
      <el-col :span="24">
        <span class="label">封面图片:</span>
        <span class="value"
          ><FileList fileType="picture" :list="form.coverImages"
        /></span>
      </el-col>
      <el-col :span="24" v-if="form.taskType === '1'">
        <span class="label">附件:</span>
        <span class="value"
          ><FileList width="250" :list="form.attachmentFiles"
        /></span>
      </el-col>
      <el-col :span="24" v-if="form.taskType === '2'">
        <span class="label">视频:</span>
        <span class="value"
          ><FileList width="250" :list="form.attachmentVideos"
        /></span>
      </el-col>
      <el-col :span="24" v-if="form.taskType === '3'">
        <span class="label">公告文件:</span>
        <span class="value"
          ><FileList width="250" :list="form.noticeFiles"
        /></span>
      </el-col>
      <el-col :span="24">
        <span class="label">任务内容:</span>
        <span class="value"></span>
      </el-col>
      <el-col :span="24">
        <Editor
          class="html"
          v-model="form.content"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="handleCreated"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.custom-detail {
  padding: 0;
  .html {
    width: 100%;
    height: auto !important;
  }
}
</style>
